<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box1{
        width:200px;
        height: 200px;
        background-color: orange;
    }
    .box3{
        height: 10em;
        width: 10em;
        background-color: greenyellow;
    }
</style>
</head>
<body>
        <div class="box1"></div>
        <!-- class用.class 来表示 -->
        <!-- 这里用到了像素 -->
        <!-- 一个一个小点点构成 每个点不同的颜色  -->
        <!-- 不同屏幕大小不同  像素越小 显示越清晰  -->
        <!-- 同样的像素不同电脑显示不同 -->
        <!-- 可能屏幕放大  -->
        <!-- 百分比？ -->
        <!-- 可以设置属性相对于其父元素属性的百分比 -->
        <!-- 父元素200--》子元素100 -->
        <!-- 可以跟随父元素去改变 父元素大他也大  -->
        <!-- 可以设置子元素相对父元素的改变而改变 -->
        <div class="box3"></div>
        <!-- em相对于元素字体的大小 计算  -->
        <!-- 1 em= 16 font-size -->
        <!-- 根据字体大小的改变而改变 -->
        <!-- 不是很好理解 -->
        <!-- 目前已像素为主 -->
        <!-- rem相对于根元素 html的字体大小来计算 -->
        



</body>
</html>